iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0

CSS + JS 時鐘

先附上最終成品圖
以及個人codepen

https://ithelp.ithome.com.tw/upload/images/20240912/201691749T2C8W7ZRZ.png

利用JS去取得現在的時間,再去操控CSS的變化,一開始覺得不太熟悉的是CSS的屬性該怎麼使用XD


技巧點

關於日期的用法有很多,主要依據此練習的內容,所會用到的做紀錄.

1. new Date()

const now = new Date(); // Thu Sep 05 2024 00:00:00 GMT+0800 (台北標準時間)

當未傳入任何參數進入時,可以得到一個依據當地現在時間的物件


const now = Date().now; // 1728057600000
const now = new Date(1724075442924); // Thu Sep 05 2024 00:00:00 GMT+0800 (台北標準時間)

另外一個也可以得到當地時間的用法
根據MDN文件的定義:回傳自 1970/01/01 00:00:00 UTC 起經過的毫秒數.
因為得到的是毫秒數,所以可以將毫秒數當作參數放入到new Date()


同樣的你也可以用new Date()去取得現在時間的秒數值

const now = new Date().getTime(); // 1728057600000

取得現在時分秒的數字後,再利用css的rotate去旋轉

方法 說明 範例
getHours 取得現在是幾點 new Date().getHours()
getMinutes 取得現在是幾分 new Date().getMinutes()
getSeconds 取得現在是幾秒 new Date().getSeconds()
toLocaleString 將現在的時間轉成當地的文字時間 new Date().toLocaleString()

綜合上述的東西,我們可以來做一個常用的的小功能:
今天有一個活動廣告彈跳窗,在使用者勾選了今天之內不再顯示之後,這個彈窗在今天內就不能再彈出,但明天的話就可以重新彈跳出.

關閉彈跳窗後,判斷是否有勾選不再跳出,並儲存當下時間到localstorage
if (checked) {
  使用者勾選今天內不彈出後,取得勾選當下的時間毫秒數
  window.localstorage.setItem("noShow", Date.now());
} else {
  window.localStorage.removeItem("noShow");
}

處理每次是否要彈窗的邏輯
const key = window.localStorage.getItem("noShow");
取得存在瀏覽器中的時間戳記資料(noShow為我儲存在瀏覽器的key值)

if (key) {
  const hideTime = new Date(+key).getDate() + 1;
  使用者勾選當下的時間日期,並且加上一天
  
  const now = new Date().getDate();
  當天使用者又打開網頁後的目前時間日期
  
  if (now < hideTime) return;
  判斷還在今天之內的話,什麼也不做
  
  // .......打開彈窗的行為.......舉例:dialog.showModal()
  
} else {
  dialog.showModal();
  瀏覽器無key值,代表彈窗要跳出
}

上面很簡單的處理使用者每天都有登入的狀況,但如果使用者間隔很久才打開網頁,造成月份不同的情況,就會需要調整一下邏輯><.

2. setInterval()

  • 每間隔多久要執行一次函式,有定時的東西,就要記得清除定時器.
setInterval("你要執行的function函式", 每間隔多久毫秒數要執行)
setInterval(getTime, 1000); // 一秒 = 1000,依此類推
clearInterval(getTime); // 清除定時

心得

第三天的時鐘完成! 要去切好那個時鐘比想像中困難QQ,css的transform需要多花點時間練習

困難處在於要理解transform-origin的css語法,正常沒有去設定的情況下,都是以一個元素的正中心去做旋轉rotate.有點抽象,可能自己拿一個物體來旋轉看看,比較好理解?


上一篇
JavaScript Drum Kit _音頻操作
下一篇
CSS variables with JS (JS操作css變數)
系列文
鱷魚帶我練習JavaScript之個人練功坊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言